<template>
  <BasicModal :title="title">
    <a-modal
      :visible="true"
      :title="'选择数字员工'"
      :centered="true"
      :footer="null"
      @cancel="closeModal"
      :bodyStyle="{ padding: '16px' }"
    >
      <a-row :gutter="16">
        <a-col v-for="employee in digitalEmployeeList" :key="employee.id" :span="8">
          <a-card :title="employee.name">
            <template #cover>
              <img
                alt="employee"
                src="https://zaishengjiankang.oss-cn-hangzhou.aliyuncs.com/profile/upload/2025/03/30_20250330193147A025_ea0478d175a846ada97cbea305f78490.png"
              />
            </template>
            <p>角色: {{ employee.role }}</p>
            <p>描述: {{ employee.description }}</p>
            <a-checkbox v-model:checked="employee.checked">选择</a-checkbox>
          </a-card>
        </a-col>
      </a-row>
    </a-modal>
  </BasicModal>
</template>

<script setup lang="ts">
import {ref, onMounted, computed} from 'vue';
import { listEmployee} from '#/api/aisys/accountRunInfo';
import { useVbenModal } from '@vben/common-ui';
import {$t} from "@vben/locales";

const digitalEmployeeList = ref<any[]>([]);


onMounted(async () => {

});

function closeModal() {
  // 关闭弹窗的逻辑
}
function handleConfirm() {
  // 点击确定的逻辑
}
const title = computed(() => {
  return '选择数字员工';
});

const [BasicModal, modalApi] = useVbenModal({
  // 在这里更改宽度
  class: 'w-[550px]',
  fullscreenButton: false,
  // 点击遮罩是否关闭
  closeOnClickModal: false,
  onCancel: closeModal,//关闭弹窗执行
  onConfirm: handleConfirm,//点击确定执行
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }
    modalApi.modalLoading(true);
    const { accountId } = modalApi.getData() as { accountId?: number | string };
    const response = await listEmployee(); // 使用正确的函数名
    console.log('111111',response)
    digitalEmployeeList.value = response.rows.map((employee: any) => ({
      ...employee,
      checked: false,
    }));

    modalApi.modalLoading(false);
  },
});
</script>
